<template>
	<view class="content" :style="[{paddingTop:(CustomBar+10)+'px'}]">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">确认订单</block>
		</cu-custom>
		<view class="waring">退款后将会扣除您所使用的抵扣金额</view>
		<view class="commodity-information">
			<view class="titlename">商品信息</view>
			<view class="goods-information">
				<image class="goodsimg"></image>
				<view class="rightview">
					<view class="goodsname">【测试商品】美人计铭美荟女神面霜套装，祛痘祛斑、去角质、让你皮祛痘祛斑、去角质、让你皮...</view>
					<view class="numandprices">
						<view class="num">×1</view>
						<view class="prices">￥396.00</view>
					</view>
				</view>
			</view>
		</view>

		<view class="refund">
			<view style="height: 15rpx;"></view>
			<view class="refundline">
				<view class="refundtitle">退款方式</view>
				<view class="refund-way">原路退回(1~7个工作日)</view>
			</view>
			<view class="refundline">
				<view class="refundtitle">退回微信零钱</view>
				<view class="refund-prices">￥385.00</view>
			</view>
			<view class="refundline">
				<view class="refundtitle">不含抵扣金额</view>
				<view class="refund-way">￥11.00</view>
			</view>
		</view>

		<view class="refund-reasonview">
			<view class="reson-title">退款原因</view>
			<radio-group @change="radioChange" class="radio-group-feed">
				<view class="reson-line" v-for="(item, index) in refundReasonData" :key="item.value">
					<view class="reson-item">
						<label>{{item}}</label>
						<radio :value="item.value" :checked="index === current" style="transform:scale(0.7)" color="#f34930" class="sexradio" />

					</view>
				</view>
			</radio-group>

			<textarea v-model="resontext" class="resontextrea" placeholder-class="placeholder" placeholder="退款说明" />
			</view>
		
		<view class="submit">提交申请</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				refundReasonData:[
					'买多了、买错了','计划有变，没时间消费','后悔了，不想要了','其他原因？告诉我们'
				],
				resontext:'',
				current: 3,
				CustomBar: this.CustomBar
			}
		},
		methods:{
			radioChange(event) {
				var that = this
				for (let i = 0; i < this.refundReasonData.length; i++) {
					if (this.refundReasonData[i].value === event.target.value) {
						this.current = i;
						break;
					}
				}
			},
		}, 
	}
</script>

<style scoped>
	.content{
		background: #f5f5f5;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
	}
	.waring{
		height: 56rpx;
		line-height: 56rpx;
		text-align: center;
		font-size: 24rpx;
		letter-spacing: 1rpx;
		color: #f8990b;
		background: rgb(248,153,11,0.2);
		margin-bottom: 30rpx;
		margin-top: 30rpx;
	}
	.commodity-information{
		background: #FFFFFF;
		border-radius: 8rpx;
		margin-left: 24rpx;
		margin-right: 24rpx;
		margin-bottom: 30rpx;
		box-sizing: border-box;
	}
	.titlename{
		height: 88rpx;
		line-height: 88rpx;
		border-bottom: #efefef solid 2rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		letter-spacing: 1rpx;
		color: #666666;
		font-size: 30rpx;
	}
	.goods-information{
		display: flex;
	}
	.goodsimg{
		width: 160rpx;
		height: 174rpx;
		background: #007AFF;
		margin: 20rpx;
		flex: none;
	}
	.rightview{
		display: flex;
		flex-direction: column;
		margin-top: 19rpx;
		margin-right: 19rpx;
	}
	.goodsname{
		height: 78rpx;
	 	font-size: 28rpx;
		letter-spacing: 1rpx;
		color: #333333;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		box-sizing: border-box;
	 overflow: hidden;
	  text-overflow: ellipsis;
	}
	.numandprices{
		display: flex;
		font-size: 28rpx;
		justify-content: space-between;
		margin-top: 60rpx;
	}
	.num{
		letter-spacing: 1px;
		color: #666666;
	}
	.prices{
		letter-spacing: 1px;
		color: #333333;
	}
	.refund{
			background-color: #ffffff;
			border-radius: 8rpx;
			margin-bottom: 30rpx;
			margin-left: 24rpx;
			margin-right: 24rpx;
			
	}
	.refundline{
		height: 88rpx;
		line-height: 88rpx;
		margin-left: 22rpx;
		margin-right: 22rpx;
		border-bottom: #efefef 2rpx solid;
		display: flex;
		justify-content: space-between;
	}
	.refundtitle{
			letter-spacing: 1px;
			color: #666666;
			font-size: 30rpx;
	}
	.refund-way{
			letter-spacing: 1px;
			color: #333333;
			font-size: 28rpx;
	}
	.refund-prices{
		letter-spacing: 1px;
		color: #f23e14;
		font-size: 28rpx;
	}
	
	.refund-reasonview{
		background: #FFFFFF;
		border-radius: 8rpx;
		/* height: 676px; */
		margin-left: 24rpx;
		margin-right: 24rpx;
		margin-bottom: 48rpx;
		padding-left: 22rpx;
		padding-right: 22rpx;
		padding-bottom: 30rpx;
	}
	.reson-title{
			letter-spacing: 1px;
			color: #666666;
			font-size: 30rpx;
			height: 88rpx;
			line-height: 88rpx;
			border-bottom: #efefef solid 2rpx;
	}
	.reson-line{
		width: 100%;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		border-bottom: #efefef solid 2rpx;
		height: 88rpx;
		line-height: 88rpx;
	}
	.reson-item{
		letter-spacing: 1px;
		color: #333333;
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
		width: 100%;
	}
	.resontextrea{
			height: 200rpx;
			background-color: #ffffff;
			border: solid 1rpx #efefef;
			width: 100%;
			font-size: 28rpx;
			padding: 10rpx;
			box-sizing: border-box;
			line-height: 40rpx;
			letter-spacing: 1rpx;
	}
	.placeholder{
		font-size: 28rpx;
		color: #999999;
	}
	.submit{
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		background-color: #f34930;
		border-radius: 8rpx;
		font-size: 36rpx;
		/* font-weight: bold; */
		letter-spacing: 2rpx;
		color: #ffffff;
		margin-top: 48rpx;
		margin-bottom: 48rpx;
		margin-left:24rpx;
		margin-right: 24rpx;
	}
	.radio{
			width: 32rpx;
			height: 32rpx;
			color: #f34930;
	}
</style>
